<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>37 - form 标签</title>
</head>
<body>
    <form action="http://www.liulongbin.top:3006/api/post" method="post">
        用户名: <input type="text" name="uname">
        <br>
        <br>
        密码: <input type="password" name="pwd">
        <br>
        <br>
        <input type="submit">
    </form>

    <form action="" method="post" enctype=""></form>

    <script>

        // form标签的作用?              
        // 1. 收集用户信息
        // 2. 将收集信息,发送给后端进行保存处理

        // form 标签在提交数据的时候, 发生页面默认跳转
        // 通过事件对象参数阻止跳转
        事件对象参数.preventDefault();





        // form 标签向后端(服务端)发送数据必须通过如下几个属性实现
        // 1.  action 属性       类似于 Ajax 中的 url, 用来设置请求地址的
        // 2.  method 属性       和 Ajax 中的 method 一样的, 用来设置请求方式的
        // 3.  enctype 属性





        // form 标签中的 enctype 属性, 用来设置请求体数据格式, 该属性和 post 请求配合使用
        
        // a)  application/x-www-form-urlencoded
        // 请求体数据格式       
        //      uname=laoduan&pwd=123

        // b)  multipart/form-data
        // 请求体数据格式
        //      ------WebKitFormBoundarySgMHAb5Q54UPB9ET
        //      Content-Disposition: form-data; name="uname"

        // c)  text/plain
        // 请求体数据格式
        //      uname=laoduan
        //      pwd=123




    </script>
</body>
</html>

<script src="./lib/jquery.js"></script>
<script>

    // 在 submit 事件中通过 jQuery 提供的一个方法一次性获取所有的数据

    // 使用步骤:
    // 1. 引入jQuery文件
    // 2. 在 submit 事件中 
    //    通过 $(form标签对象).serialize();      一次性获取所有的标签内容





</script>